<template>
  <div class="h-full grid grid-cols-2">
    <div class="flex-center flex-col h-full bg-[#f0f2f5] text-[#303133] text-8 font-bold">
      <div>normalization - vue - opentiny</div>
      <div>规范化模板</div>
      <div>中后台管理基础模板</div>
    </div>
    <div class="flex-center">
      <div class="w-[80%] rounded-md bg-white p-8">
        <div class="font-bold text-2xl pb-5">🎉欢迎登录🎉</div>
        <tiny-tabs v-model="activeName" size="small">
          <tiny-tab-item v-for="item in tabs" v-bind="item"> </tiny-tab-item>
        </tiny-tabs>
        <tiny-form
          ref="formRef"
          label-width="0"
          size="medium"
          :model="loginParams"
          :rules="rules"
          :show-message="false"
        >
          <tiny-form-item prop="username" required>
            <tiny-input v-model="loginParams.username" placeholder="请输入用户名"></tiny-input>
          </tiny-form-item>
          <tiny-form-item prop="password" required>
            <tiny-input
              v-model="loginParams.password"
              placeholder="请输入密码"
              type="password"
              show-password
            ></tiny-input>
          </tiny-form-item>
          <tiny-form-item>
            <div class="flex-between">
              <tiny-checkbox v-model="loginParams.rememberMe">记住密码</tiny-checkbox>
              <div class="flex-y-center">
                <div class="hover:text-[#1890ff] cursor-pointer" @click="handleRegister">
                  立即注册
                </div>
                <tiny-divider direction="vertical"></tiny-divider>
                <div class="hover:text-[#1890ff] cursor-pointer" @click="handleForget">
                  忘记密码
                </div>
              </div>
            </div>
          </tiny-form-item>
          <tiny-form-item>
            <tiny-button
              class="w-full"
              type="primary"
              :loading="userStore.loading"
              @click="handleLogin"
            >
              登录
            </tiny-button>
          </tiny-form-item>
        </tiny-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { devMessage } from '@/utils/global';
import type { TinyForm, TinyInput } from '@opentiny/vue';
import { reactive, watch } from 'vue';
import { ref } from 'vue';
import { useUserStore } from '@/stores/userStore';

const userStore = useUserStore();
const formRef = ref();
const activeName = ref('1');
const tabs = [
  {
    title: '管理员登录',
    name: '1',
    key: '1',
  },
  {
    title: '普通角色登录',
    name: '2',
    key: '2',
  },
];
const loginParams = reactive({
  username: 'normalization',
  password: 'normalization8520',
  rememberMe: false,
});

const rules = {
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: ['blur', 'change'],
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: ['blur', 'change'],
    },
  ],
};

watch(activeName, () => {
  loginParams.username = activeName.value === '1' ? 'normalization' : 'role1';
  loginParams.password = activeName.value === '1' ? 'normalization8520' : 'role123';
});

const handleLogin = async () => {
  await formRef.value?.validate();
  userStore.login(loginParams);
};
const handleRegister = async () => {
  devMessage();
};
const handleForget = async () => {
  devMessage();
};
</script>

<style scoped></style>
